<template>
  <div class="home">
    <home-header @headerHeight="handleHeaderHeight"></home-header>
    <home-search :isAbsolute="isAbsolute"></home-search>
    <home-swiper :isAbsolute="isAbsolute"></home-swiper>
    <home-recommend></home-recommend>
  </div>
</template>

<script>
import HomeHeader from './components/Header'
import HomeSearch from './components/Search'
import HomeSwiper from './components/Swiper'
import HomeRecommend from './components/Recommend'
export default {
  name: 'Home',
  components: {
    HomeHeader,
    HomeSearch,
    HomeSwiper,
    HomeRecommend
  },
  data () {
    return {
      headerHeight: 0,
      isAbsolute: false
    }
  },
  mounted () {
    window.addEventListener('scroll', this.handleScroll, false)
  },
  methods: {
    handleScroll () {
      var scrollY = window.scrollY
      if (this.headerHeight - scrollY <= 0) {
        this.isAbsolute = true
      } else {
        this.isAbsolute = false
      }
    },
    handleHeaderHeight (data) {
      this.headerHeight = data
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>
